<template>
  <div class="pro_center" v-loading="loading">
    <div class="newlist newflex" style="margin-bottom: 10px; width: 100% !importatn;">
      <div class="newleft">
        <div class="newthli" style="position: relative;">
          订单信息
        </div>
        <div class="newthli">收件人管理</div>
        <div class="newthli" style="flex:0.7">备注&失败原因</div>
        <div class="newthli" style="flex:0.7">订单状态</div>
        <div class="newthli" style="flex:0.7">生产信息</div>
        <div class="newthli" style="flex:0.7">操作</div>
      </div>
    </div>
    <div class="newlist newlistbor" v-for="item in orderlist" :key="item.id">
      <div class="newh">
        <div class="newleft">
          <div class="newhli"></div>
          <div class="newhli">
            订单ID：{{item.order_id}}
            <i class="el-icon-document-copy"
              style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;" @click="copy(item.id)"></i>
          </div>
          <div class="newhli" style="display:flex">
            订单来源：{{item.source}}
          </div>
          <div class="newhli">
            外部订单编号：{{item.source_id}}
            <i class="el-icon-document-copy"
              style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;"
              @click="copy(item.source_id)"></i>
            <span v-if="item.source_id.indexOf('-C') != -1">
              <el-popover placement="top-start" width="200" trigger="hover"
                content="该订单为拆分订单（电商平台购买数量大于2时自动拆分的订单）针对该订单的修改信息、加急、标旗备注、外呼已联系操作都将自动同步修改到其关联的拆分订单上。">
                <span slot="reference">
                  <img src="../../../../static/img/chai.png" @click="searchbrother(item.real_source_id)"
                    style="width: 20px; margin-left: 10px; position: relative; top: 4px; cursor: pointer;" />
                </span>
              </el-popover>
            </span>
          </div>
          <div class="newhli" >平台创建时间：{{item.created_at}}</div>

          <!-- <div class="newhli">提单时间：{{item.comission_at}}</div> -->
          <el-tooltip popper-class="tooltip" effect="dark" placement="top">
            <div slot="content">{{item.memo}}</div>
            <div>
              <span @click="choosecolorid(item.id)" :style="{color:item.flag,fontSize:25+'px'}"
                class="iconfont icon-flag-fill"></span>
            </div>
          </el-tooltip>
        </div>
        <div class="newright" style="padding-right: 20px;display: flex;">

          <el-tooltip v-if="item.complaint_job_id" popper-class="tooltip" effect="dark" placement="top">
            <div slot="content">该订单被用户投诉过，点击可查看详情</div>
            <div @click="todetail_s(item.complaint_job_id,item.complaint_job_status)" class="t_su">诉</div>
          </el-tooltip>
        </div>
      </div>
      <div class="newb">
        <div class="newt1">
          <div style="padding: 15px;">
            <div class="newtitle">商品名称:{{item.goods_name}}</span></div>
            <div class="newcode">商品编码:{{item.goods_sku}}</div>
            <div class="newcode" v-if="item.plan_mobile != 0">购买号码:{{item.plan_mobile}}</div>
            <div class="newcode" v-if="item.plan_mobile == 0">购买号码:无</div>
            <div class="newcode">购买数量:{{item.amount}}</div>
            <div class="newcode">
              <div style="display: flex;">
                <div>供应商:</div>

              </div>

            </div>
          </div>

        </div>
        <div class="newt2">
          <div style="padding: 15px;">
            <div class="newcar">
              <span style="margin-right: 20px;">证件姓名：{{item.id_card_name}}</span>
              收件人：{{item.address_name}}
            </div>
            <div class="newcar">
              证件号码：{{item.id_card_num}}
            </div>
            <div class="newcar">联系电话：{{item.address_mobile}}</div>
            <div class="newcar">
              收货地址：{{item.address_province}}{{item.address_city}}{{item.address_district}}{{item.address}}
            </div>
          </div>

        </div>
        <div class="newt3" style="flex:0.7">
          <div style="padding: 15px;">
            <el-tooltip effect="dark" popper-class="tooltip" placement="top">
              <div slot="content">{{item.reason}}</div>
              <div style="max-height:100px; overflow: hidden; word-break: break-all;">{{item.reason}}</div>
            </el-tooltip>
          </div>

        </div>
        <div class="newt4" style="flex:0.7">
          <div style="padding: 15px;">
            <div class="newcar">{{item.status_name}}</div>
            <!-- <div class="newcar2" @click="seememo(item.seller_memo)">操作记录</div> -->
            <div class="newcar">激活状态:{{item.active_name}} </div>
            <div v-if="item.active_name == '激活且充值'">首冲金额：{{item.recharge_amount}}元</div>
          </div>

        </div>
        <div class="newt5" style="flex:0.7">
          <div style="padding:15px;">
            <div class="newcar">生产号码:
              <span class="newcar" v-if="item.plan_mobile_produced != null">{{item.plan_mobile_produced}}</span>
              <span class="newcar" v-if="item.plan_mobile_produced == null">无</span>
            </div>

            <div class="newcar" style="  cursor: pointer;" v-if="item.tracking_company != ''">物流公司：<span
                @click="wuliuxiangqing(item)" class="lanse">{{item.tracking_company}}</span><i
                class="el-icon-document-copy"
                style="color: #077ECE; font-size: 16px; margin-left: 10px; cursor: pointer;"
                @click="copy2(item.tracking_company,item.tracking_number)"></i></div>
            <div class="newcar" style="  cursor: pointer;" v-if="item.tracking_number != ''">物流单号：<span
                @click="wuliuxiangqing(item)" class="lanse">{{item.tracking_number}}</span></div>
            <!-- <div class="newcar2" @click="seememo(item.seller_memo)">操作记录</div> -->
          </div>

        </div>
        <div class="newt5" style="flex:0.7">

        </div>
      </div>
    </div>

    <div style="text-align: right;">
      <el-pagination background :page-size="searchall2.size" :current-page="searchall2.page"
        @current-change="fanyeall2" layout="total,prev, pager, next" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    name: 'zhongjianshang',
    data() {
      return {
        loading:true,
        searchall2:{
          page:1,
          page_size:20,
          order_id:"",
        },
        total:0,
        orderlist:[]
      };
    },
    created() {
      console.log(2)
      this.getlist2()
    },
    mounted() {

    },
    methods: {
      fanyeall2:function(){
        this.searchall2.page = 1
        this.getlist2()
      },
      getlist2:function(){
        axios.get("/api/plan-market/order/broker/transfer/log",{params:this.searchall2}).then(response => {
        	if (response.data.msg.code == 0) {
            this.loading = false
            this.orderlist = response.data.data.data
        		this.total = response.data.data.total
        	} else {
            this.loading = false
        		this.$message.error(response.data.msg.info);
        	}
        });
      },
    }
  };
</script>

<style lang="scss" scoped>

		.el-form-item {
			margin-bottom: 10px;
		}
    .newsearch {
    	display: flex;
    	text-align: center;
    	margin-bottom: 10px;
    	font-size: 14px;
    	// border-bottom: 3px #dcdcdc solid;

    	.shuxian {
    		img {
    			height: 20px;
    			position: relative;
    			top: 14px
    		}
    	}

    	.act {
    		color: #EEF7FF;
    		border-bottom: 3px #EEF7FF solid !important;
    	}

    	.news1 {
    		padding: 10px 15px;
    		cursor: pointer;
    		position: relative;
    		top: 3px;
    	}

    	.news2 {
    		padding: 10px 0;

    		cursor: pointer;
    	}

    	.news3 {
    		padding: 10px 0;

    		cursor: pointer;
    	}

    	.news4 {
    		padding: 10px 0;
    		cursor: pointer;
    	}
    }


				.o_ul {
					background: #F9F9F9;
					display: flex;

					.o_li {
						flex-basis: 160px;
						line-height: 45px;
						display: block;
						color: #727272;
						border-top: 3px #F9F9F9 solid;
						font-size: 14px;
						text-align: center;
					}

					.act {
						border-top: 3px #DD2727 solid;
						background: #FFFFFF;
					}
				}

				.newflex {
					display: flex;
					justify-content: space-between;
				}

				.newlist {
					.newleft {
						display: flex;
						width: 100%;
					}

					.newthli { text-align: center;
            flex:1;
						font-size: 14px;
						line-height: 40px;
						height: 40px;
						background: #f9f9f9;
						color: #646464;
					}

					// .newthli:nth-child(1) {
					// 	flex-basis: 101px;
					// 	padding-left: 15px;
					// }

					// .newthli:nth-child(2) {
					// 	flex-basis: 150px;
					// }

					// .newthli:nth-child(3) {
					// 	flex-basis: 160px;
					// 	color: #2775b6;
					// }

					// .newthli:nth-child(4) {
					// 	flex-basis: 200px;
					// }

					// .newthli:nth-child(5) {
					// 	flex-basis: 180px;
					// 	text-align: center;
					// }

					// .newthli:nth-child(6) {
					// 	flex-basis: 180px;
					// 	text-align: center;
					// }

					// .newthli:nth-child(7) {
					// 	flex-basis: 180px;
					// 	text-align: center;
					// }

					// .newright {
					// 	flex-basis: 116px;
					// 	text-align: center;
					// }

					.newh {
						display: flex;
						justify-content: space-between;
						background: #f3faff;
						line-height: 48px;
						height: 48px;
						color: #646464;
						font-size: 13px;
						border: 1px #eaeaea solid;

						.newhli {
							margin-right: 10px;

							.el-icon-document-copy {
								margin-left: 0 !important;
							}

							img {
								width: 20px;
								position: relative;
								top: 2px;
								cursor: pointer;
							}
						}

						.newhli:nth-child(1) {
							flex-basis: 10px;
							text-align: center;
						}
					}

					.newb {
						display: flex;
						font-size: 14px;
						color: #646464;
						line-height: 25px;
						margin-bottom: 10px;
						border: 1px #eaeaea solid;

						.newt1 {
							flex:1;
							border-right: 1px #eaeaea solid;
						}

						.newt2 {
							flex:1;
							border-right: 1px #eaeaea solid;
						}

						.seephoto {
							color: #2775b6;
							cursor: pointer;
						}

						.newt3 {
							flex:1;
							border-right: 1px #eaeaea solid;
						}

						.newt4 {
							flex:1;
							border-right: 1px #eaeaea solid;

							.newcar {
								max-height: 80px;
								overflow: hidden;
							}

							.newcar2 {
								color: #2775b6;
								cursor: pointer;
							}
						}

						.newt5 {
							flex:1;
							border-right: 1px #eaeaea solid;
						}

					}
				}


		.processing {
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
		}

		.eaeaea {
			background: #E5E5E5;
		}

		.orderflex {
			display: flex;
		}


		.pro_top {
			padding: 20px;
			position: relative;

			.el-form-item {
				margin-bottom: 20px;
			}

			/deep/ .el-form-item__label {
				font-size: 14px;

			}

			/deep/ .el-input {

				width: 220px;
			}

			/deep/ .el-form-item__content {

			}

			/deep/ .el-input__inner {
width: 220px;
			}

			/deep/ .el-input__icon {

			}
		}

		.rtm {
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

		.ordersub {
			padding-left: 100px;
			padding-top: 10px;


		}

		.list {
			color: #727272;
		}

		.orderlist {
			margin: 20px 0;
			width: 100%;
			overflow: auto;
			white-space: nowrap;
			position: relative;
			padding-bottom: 50px;
		}

		.list .th {
			background: #E5E5E5;
			line-height: 45px;
			font-size: 14px;
			display: inline-block;
			width: 130px;
			margin: 0;
			text-align: center;
		}

		.list .td {
			line-height: 45px;
			height: 45px;
			display: inline-block;
			width: 130px;
			font-size: 14px;
			overflow: hidden;
			margin: 0;
			text-align: center;
		}

		.list .td span {
			margin: 0 5px;
			color: #197CFF;
			cursor: pointer;
		}

		.list .el-dropdown-link {
			font-size: 14px;
		}

		.orderfanye {
			position: absolute;
			right: 10px;
			bottom: 10px;
		}

		.logflex {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
		}

		.logflex div {
			width: 377px;
			text-align: center;
		}

		.logflex .proimg {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 400px;
			background: #EAEAEA;
		}

		.logflex .proimg img {
			max-width: 100%;
			max-height: 100%;
		}

		.protitle {
			color: #197CFF;
			cursor: pointer;
			margin-top: 20px;
		}

		.propipei {
			padding-left: 90px;
			font-size: 14px;
			margin-bottom: 20px;
		}

		.propipei span {
			margin: 0 10px;
			color: #FF5053;
		}

		.colorli {
			display: flex;
			width: 100px;
		}

		.colorli div {
			flex: 1;
			justify-content: space-between;
			line-height: 34px;
			text-align: center;
		}

		.colorname {
			width: 60px;
			height: 24px;
			padding: 5px 20px;
		}

		.orderflex .el-form-item__label {
			font-size: 14px;
		}

		.orderflex input {
			width: 190px;
		}

		.log input {
			width: 300px;
		}

	.t_su{
		background-color: #AF0000;
		color: white;
		width: 26px;
		height: 26px;
		text-align: center;
		line-height: 26px;
		border-radius: 3px;
		cursor: pointer;
		margin-top:12px ;
		// position: absolute;
		// top: 12px;
		// right: 15px;
	}
</style>
